<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>单向数据绑定和双向数据绑定</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <p>{{title}}</p>
            <!--  TODO:单向数据绑定 -->

            <!--  TODO:还是单向数据绑定 （数据只能从data流向模板页面）  -->

            <!-- 双向数据绑定，一般都是针对表单类元素的 -->
            <!-- HTML表单元素主要包括input、select、textarea三大类，而input中的type类型非常的多，包括text、tel、checkbox、radio、file等 -->
            <!-- TODO: 双向数据绑定，从M到V，再从V到M  -->

            <!--  TODO:双向数据绑定的缩写方式 -->

            <!--  TODO:普通元素无法实现v-model双向绑定操作功能 -->
        </div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    title: 'Vue2',
                    url: 'http://www.atguigu.com',
                },
            });
        </script>
    </body>
</html>
